<!-- 工作区的头 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">题目数据显示</h1>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!--主要内容-->
<section id="main-info" class="content">


    <div class="container-fluid">

        <div class="card-body">
            <div id="jsGrid1" class="jsgrid" style="position: relative; height: 100%; width: 100%;">
                <div class="jsgrid-grid-body" style="height: 1000px;">
                    <div class="card">
                        <!-- 表格内容区域 -->
                        <div class="card-body">
                            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6"></div>
                                    <div class="col-sm-12 col-md-6"></div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="example2"
                                               class="table table-bordered table-hover dataTable dtr-inline"
                                               aria-describedby="example2_info">
                                            <thead>
                                            <tr>
                                                <th class="sorting sorting_asc text-center" tabindex="0"
                                                    aria-controls="example2" rowspan="1"
                                                    colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending"
                                                    style="width: 5%">ID
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Browser: activate to sort column ascending"
                                                    style="width: 60%">题目
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Browser: activate to sort column ascending"
                                                    style="width: 10%">分值
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending"
                                                    style="width: 10%">题型
                                                </th>
                                                <th class="sorting text-center" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending"
                                                    style="width: 15%">科目
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody id="questionTbody">
                                            <tr class="odd">
                                                <td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
                                                <td>Firefox 1.0</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                            </tr>
                                            <tr class="even">
                                                <td class="dtr-control sorting_1 text-center" tabindex="0">Gecko</td>
                                                <td>Firefox 1.5</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                                <td class="text-center">Win 98+ / OSX.2+</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>

    </div>

</section>

<script>
    $.ajax({
        // 异步请求的地址
        url: "/question/getAll.action",
        // 默认是get请求
        type: "get",
        // 后端返回数据的格式JSON
        dataType: "json",

        // 请求之前做的事情
        beforeSend: function (XMLHttpRequest) {
            console.log("请求之前做的事情.......");
        },

        // 请求成功做的事情
        success: function (data, textStatus) {
            console.log("请求成功做的事情........");

            // 删除标签中已有的数据
            $("#questionTbody").empty();

            $.each(data.data, function (i, n) {
                $("#questionTbody").append('<tr class="odd">\n' +
                    '                                                <td class="dtr-control sorting_1 text-center" tabindex="0">'+ n.id +'</td>\n' +
                    '                                                <td>'+ n.title +'</td>\n' +
                    '                                                <td class="text-center">'+ n.score +'</td>\n' +
                    '                                                <td class="text-center">'+ n.type.name +'</td>\n' +
                    '                                                <td class="text-center">'+ n.subject.name +'</td>\n' +
                    '                                            </tr>');
            });

        },

        // 请求失败做的事情
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("请求失败做的事情.......");
        },

        // 请求完毕做的事情
        complete: function (XMLHttpRequest, textStatus) {
            console.log("请求完毕做的事情.......");
        }
    });
</script>


